<template>
  <tr>
       <td><input type="checkbox" v-model='changecheck'></td>
        <td>{{uname}}</td>
        <td>{{price}}</td>
        <td>
          <button @click=" num1>1 ?num1-- :num1">-</button>{{num1}}
          <button @click='num1++'>+</button>
        </td>
        <td>{{sum}}</td>
        <td><button @click="del">删除</button></td>
       
        
  </tr>
</template>

<script>
export default {
  data(){
    return {
      num1:this.num,
      changecheck:this.checked

    }
  }, 
  props:['uname','price','num','checked','index'],
  
  computed:{
     sum(){
      return this.num1*this.price
     }
  },

  methods:{
    del(){
      this.$emit('del',this.index)
    }
  },
  watch:{
    changecheck:{
      deep:true,
      immediate:true,
      handler(){
        this.$emit('change',this.checked,this.index)
      }
    },
    checked:{
       deep:true,
      immediate:true,
      handler(){
        this.changecheck=this.checked
      }
    },
    num:{
      deep:true,
      immediate:true,
      handler(){
        this.$emit('changenum',this.index,this.num)
      }
    }
  }
 

}

</script>

<style>

</style>